<template>
    <arco-modal class="vpt-modal-base" :destroyOnClose="true" v-model:visible="showModal" :width="'70%'" :title="title"
        @cancel="onActionCancel" @ok="onActionSubmit">
        <p>sdfsdfsdfdsfsdfsd</p>
    </arco-modal>
</template>

<script setup>
import { watch } from "vue";
import { useModal } from "@/hooks/useModal";

defineOptions({
    name: 'vptModalDate',
});


const { showModal } = useModal();

const props = defineProps({
    visible: { type: Boolean, default: false },
    title: { type: String, default: ''}
});

watch(
    () => props.visible,
    (nval, oval) => {
        showModal.value = nval;
    }
);

const emit = defineEmits(["onEvent"]);

const onActionCancel = () => {
    onEvent({ type: 'cancel' })
};

const onActionSubmit = () => {
    onEvent({ type: 'submit' })
};

const onEvent = (pack) => {
    const { type } = pack;
    if (type === 'submit') {
        showModal.value = false;
    }
    if (type === 'cancel') {
        showModal.value = false;
    }
    emit('onEvent', pack);
}

</script>

<style lang="less">
@import url("../../../assets/style/modal.less");
</style>